<template>
    <div>
    <el-dialog title="激活详情" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
        <el-form :model="dataForm" :rules="dataRule" label-position="left" ref="dataForm" @keyup.enter.native="dataFormSubmit()">
            <el-form-item label="签到地址:" :label-width="formLabelWidth" prop="activateAddress">
                <!-- <el-input v-model.trim="dataForm.activateAddress" placeholder="签到地址"> </el-input> -->
               <p> {{dataForm.activateAddress  }}</p>
            </el-form-item>
            <el-form-item label="签到时间:" :label-width="formLabelWidth" prop="activateTime">
                <!-- <el-input v-model.trim="dataForm.activateTime" placeholder="签到时间"> </el-input> -->
                <!-- <el-date-picker v-model="dataForm.activateTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择签到时间" style="width: 100%;">
                </el-date-picker> -->
                <p> {{dataForm.activateTime  }}</p>
            </el-form-item>
            <el-form-item label="司机姓名:" :label-width="formLabelWidth" prop="driverName">
                <!-- <el-input v-model.trim="dataForm.driverName" placeholder="司机姓名"> </el-input> -->
                <p> {{dataForm.driverName  }}</p>
            </el-form-item>
            <el-form-item label="司机联系电话:" :label-width="formLabelWidth" prop="driverPhone">
                <!-- <el-input v-model.trim="dataForm.driverPhone" placeholder="司机联系电话"> </el-input> -->
                <p> {{dataForm.driverPhone  }}</p>
            </el-form-item>
            <el-form-item label="图片:" :label-width="formLabelWidth" prop="appendixName" class="applicaWord">
                <!-- <el-upload :action="urlUpdate" list-type="picture-card" :headers="token" :file-list="fileList"
                    :on-success="handleSuccess" :on-change="handleChange">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span class="el-upload-list__item-delete" @click="handleDownloadImg(file)">
                                <i class="el-icon-download"></i>
                            </span>
                            <span class="el-upload-list__item-delete" @click="handleRemoveImg(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload> -->
                <div class="imgList">
                    <div v-for="item in fileList" class="imgItem">
                        <img class="imgitem-thumbnail" :src="item.url" alt="">
                        <span class="imgitem-actions">
                            <span class="imgitem-preview" @click="handlePictureCardPreview(item)">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span class="imgitem-delete" @click="handleDownloadImg(item)">
                                <i class="el-icon-download"></i>
                            </span>
                        </span>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                <!-- <el-button size="small" type="primary" @click="dataFormSubmit()" :disabled="isDisabled">确 定</el-button> -->
            </span>
        </template>
       
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleImg">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        </div>
</template>
  
<script>
import { v4 as uuidv4 } from "uuid";
import { getToken } from "@/utils/auth";
export default {
    emits: ["refreshDataList"],
    data() {
        return {
            urlUpdate: '',//文件上传路径
            token: {
                token: ''
            },
            dialogVisibleImg:false,
            dialogFormVisible: false,
            isDisabled: false,
            dataForm: {
                id: 0,
                activateAddress: '',//签到地址
                activateTime: '',//签到时间
                appendixName: '',//附件名称
                appendixUrl: '',//附件路径
                driverName: '',//司机姓名
                driverPhone: '',//司机联系电话
                productId: 0,
            },
            dialogImageUrl:'',
            projectList: [],
            driverList: [],
            fileList: [],
            url: process.env.VUE_APP_BASE_API,
            headers: {
                token: getToken() //从cookie里获取token，并赋值  Authorization ，而不是token
            },
            dataRule: {
                // driverName: [
                //     { required: true, message: '司机姓名必填' },
                // ],
                // driverPhone: [
                //     { required: true, message: '司机联系电话必填' },
                // ],
                // licenseNumber: [
                //     { required: true, message: '车牌号必须填写' },
                // ]
            },
            formLabelWidth: "120px",
        };
    },
    created() {
        this.urlUpdate = process.env.VUE_APP_BASE_API + '/file/uploadFileInterface'
        this.token.token = sessionStorage.getItem("Token");
    },
    methods: {
        async init(productId) {
            this.dataForm.productId = productId || 0
            this.dialogFormVisible = true;
            this.$nextTick(async () => {
                this.$refs["dataForm"].resetFields();
                this.fileList = []
                this.projectList = []
                this.driverList = []
                await this.Sevice({
                    url: "/project/list",
                    method: "get",
                }).then(async (res) => {
                    if (res.code != 200) {
                    } else {
                        this.projectList = res.list
                    }
                });
                if (!this.dataForm.productId) {
                    // 新增
                    // this.treeListTreeSetCurrentNode()
                } else {
                    //获取详情
                    this.Sevice({
                        url: "/product/activate/" + this.dataForm.productId,
                        method: "get",
                    }).then(async (res) => {
                        // console.log(res);
                        if (res.code != 200) {
                            // this.$message.error(res.data.msg)
                        } else {
                            this.dataForm.activateAddress=res.info.activateAddress
                            this.dataForm.activateTime=res.info.activateTime
                            this.dataForm.appendixName=res.info.appendixName
                            this.dataForm.appendixUrl=res.info.appendixUrl
                            this.dataForm.driverName=res.info.driverName
                            this.dataForm.driverPhone=res.info.driverPhone
                            this.dataForm.productId=res.info.productId
                             this.dataForm.id=res.info.id
                            if (this.dataForm.appendixUrl) {
                                let appendixUrl = this.dataForm.appendixUrl.split(',')
                                let appendixName = this.dataForm.appendixName.split(',')
                                let list = []
                                for (let i = 0; i < appendixUrl.length; i++) {
                                    list.push({ 
                                        url: this.url+appendixUrl[i], 
                                        name: appendixName[i], 
                                        response:{
                                            map:{
                                                filePath:appendixUrl[i],
                                                fileName: appendixName[i], 
                                            }
                                        }
                                    })
                                }
                                this.fileList = list
                            }

                        }
                    });
                }
            })

        },
        projectChange(id) {
            this.getDriver(id)
        },
        //获取司机
        getDriver(id) {
            this.Sevice({
                url: "/project/info/" + id,
                method: "get",
            }).then(async (res) => {
                // console.log(res);
                if (res.code != 200) {
                    // this.$message.error(res.data.msg)
                } else {
                    this.driverList = res.info.projectDrivers;
                }
            });
        },
        //附件上传成功回调
        handleSuccess(response, file, fileList) {
            console.log(response, file, fileList)
            if (response.code == 200) {
                this.fileList = fileList
            } else {
                for (let i = 0; i < fileList.length; i++) {
                    if (fileList[i].uid == file.uid) {
                        fileList.splice(i, 1);
                    }
                }
                this.$message({ message: response.msg, type: 'error', duration: 1000 })
            }
        },
        //上传文件
        handleChange(file, fileList) {
            this.fileList = fileList;

        },
        handleRemoveImg(file) {
            console.log(file, this.fileList);
            for (let i = 0; i < this.fileList.length; i++) {
                if (this.fileList[i].uid == file.uid) {
                    this.fileList.splice(i, 1);
                }
            }
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisibleImg = true;
        },
        handleDownloadImg(file) {
            this.fileDown(file);
        },
        // 表单提交
        async dataFormSubmit() {
            this.$refs["dataForm"].validate(async (valid) => {
                if (valid) {
                    //附件
                    let appendixUrl = []
                    let appendixName = []
                    console.log(this.fileList)
                    if (this.fileList.length) {
                        for (let i = 0; i < this.fileList.length; i++) {
                            if (this.fileList[i].response) {
                                appendixUrl.push(this.fileList[i].response.map.filePath)
                            } else {
                                appendixUrl.push(this.fileList[i].url)
                            }
                            appendixName.push(this.fileList[i].name)
                        }
                    }
                    this.dataForm.appendixUrl = appendixUrl.toString()
                    this.dataForm.appendixName = appendixName.toString()
                    let url = "/product/activate";
                    this.isDisabled = true;
                    await this.Sevice({
                        url: url,
                        method: "post",
                        data: {
                            activateAddress: this.dataForm.activateAddress,
                            // activateTime: this.dataForm.activateTime,
                            appendixName: this.dataForm.appendixName,
                            appendixUrl: this.dataForm.appendixUrl,
                            driveName: this.dataForm.driveName,
                            drivePhone: this.dataForm.drivePhone,
                            productId: this.dataForm.productId,
                            id: this.dataForm.id || undefined,
                        }
                    }).then((res) => {
                        if (res && res.code == 200) {
                            this.dialogFormVisible = false;
                            this.$message({
                                message: res.msg,
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.isDisabled = false;
                                    this.$emit("getUserlist");
                                },
                            });
                        } else {
                            this.isDisabled = false;
                        }
                    }).catch(error => {
                        console.log(error)
                        this.isDisabled = false;;
                    });
                }
            });
        },
    },
};
</script>
  
<style scoped>
.mod-menu .menu-list__input>.el-input__inner,
.mod-menu .icon-list__input>.el-input__inner {
    cursor: pointer;
}

.mod-menu__icon-popover {
    width: 458px;
    overflow: hidden;
}

.mod-menu__icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
}

.mod-menu__icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
}

.mod-menu__icon-list>.el-button {
    padding: 8px;
    margin: 8px 0 0 8px;
}

.mod-menu__icon-list>.el-button>span {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.mod-menu .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
}

.el-tree {
    height: 200px;
    overflow-y: auto;
}
.imgList{
    display: flex;
    flex-wrap: wrap;
}
.imgItem{
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    margin: 0 8px 8px 0;
    position: relative;
}
.imgitem-thumbnail{
    width: 100%;
    /* height: 100%; */
}
.imgitem-actions{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    transition: opacity .3s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgitem-actions:hover{
    opacity: 1;
}
.imgitem-preview{
    cursor: pointer;
    margin-right: 15px;
}
.imgitem-delete{
    cursor: pointer;
}
</style>
  